<template>
    <div id="app" >
        <div class="bg-purple">
            <header class="head">
                <img class="head-mt" src= './assets/images/peach-svg/mitaoLogo.svg'>
                <div class="head-img">
                    <!-- <img class="imgle" src= './assets/images/peach-svg/MenuFold.svg'> -->
                    <!-- <img @click="reload()" class="imgri" src= './assets/images/peach-svg/Reload.svg'> -->
                </div>
                <div class="admin-btn-ul">
                    <div class="admin-li">
                        <div class="admin_img">
                            <img class="admin_img" src= './assets/images/bg-welcome.png'>
                        </div>
                        <div class="admin_name">
                            <span class="admin_up">{{UserInfo.name}}</span>
                            <span class="admin-role">{{UserInfo.role}}</span>
                        </div>
                        <img class="admin_selectimg" src= './assets/images/peach-svg/Rectangle.svg'>
                        <ul class="admin-menu-ul fadeIn">
                            <li @click="loginOut()">退出登录</li>
                        </ul>
                    </div>
                </div>
            </header>
            <menuSide :list="meanList" @menuSelect="selectMenu" :selected="selectMenu1" :sys="sys"></menuSide>
            <article class="content">
                <div id="tabNav" class="tabNav" v-show="show">
                    <div class="tabNav-wp" ref='navWrap'>
                        <ul class="acrossTab" ref='navUl'>
                            <li v-for="(item,index) in tabList" :key="index" @click="chooseTab(item,index)" @dblclick="removeTab(index)">
                                <i :class="['tab-circle',{'active-circle':index==chooseTabIndex}]"></i>
                                <span>{{item.name}}</span>
                                <img @click.stop="removeTab(index)" class="admin_selectimg" src= './assets/images/peach-svg/Close.svg'>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box-name" v-show="show"><span>{{boxname}}</span></div>
                <div class="box-content" v-for="(item,index) in tabList" :key="item.url" v-show="index==chooseTabIndex">
                    <keep-alive>
                        <component :is="item.url" :isSelect="needFresh&&index==chooseTabIndex"></component>
                    </keep-alive>
                </div>
            </article>
        </div>
        <!-- <div class="login" v-else>
            <div class="login-chil">
                <div class="login-input">
                    <span class="login-input-span">登录</span>
                    <div class="chil-cloum">
                        <span>账号</span>
                        <el-input @keyup.enter="onLogin()" v-model.trim="account" placeholder="请输入账号" clearable prefix-icon="el-icon-user"></el-input>
                    </div>
                    <div class="chil-cloum2">
                        <span>密码</span>
                        <el-input @keyup.enter="onLogin()" v-model.trim="password" placeholder="请输入密码" show-password clearable prefix-icon="el-icon-lock"></el-input>
                    </div>        
                    <el-button @click="onLogin()">登录</el-button>       
                </div>                
            </div>
        </div>      -->
       
    </div>
</template>

<script>
import Vue from "vue";
import Request from "./commons/Request";
import utils from "./commons/utils"
import bus from "./commons/EventBus";
const { env, description,platform,PF} = require("../package.json")
import { mapGetters } from "vuex";
import { delay,RequestUrl,ProjectName } from "./commons/staticName";
import menuSide from './components/menuSide'
import Axios from 'axios';
document.title = PF[platform][env].name
export default {
name: "App",
data() {
    return {
        Cook:"",
        chooseName:"",        
        account:"",
        password:"",                
        show:true,
        projectName:ProjectName,
        tabList: [],
        role:"",
        boxname:"",
        chooseTabIndex: 0,
        chooseParentId: 0,
        chooseId:0,
        meanList: [],
        isMore:false,
        leftPos:0,
        tabIsClose:false,
        needFresh:false,
        colorIsDrop:false,
        idIndex:0,
        resourceMap:new Map(),
        selectMenu1:"",
        sys:"",
    };
},
components: {menuSide},
computed: {
    ...mapGetters(["ResourceList","UserInfo",'isLogin']),   
},
watch: {
    ResourceList(oldVal, newVal) {
        this.delayInitIndexList();
    },
    chooseTabIndex(oldVal,newVal){
        this.updateWinSize();
    }
},
methods: {
    reload(){
        window.location.reload() 
    },
    delayInitIndexList() {
        delay(() => {
            this.initIndexList();
        }, 200);
    },
    HasQueryPerm(Perms){
        return true;
    },
    loopResourceData(item){
        let info = {Name:item.Title,Path:item.Name,ChildList:[],ParentMod:item.Perms.length==0&&item.Children.length>0,Icon:item.Icon}
        this.resourceMap.set(info.Path,info.Name);
        item.Children.forEach(childItem => {
            let perm =false;
            if(childItem.Perms.length>0||childItem.Children.length==0){
                perm = this.HasQueryPerm(childItem.Perms);
            }else{
                perm = true;
            }
            if(perm){
                let childInfo = this.loopResourceData(childItem);
                if(!childInfo.ParentMod||childInfo.ChildList.length>0){
                    info.ChildList.push(this.loopResourceData(childItem));
                }
            }
        });
        return info;
    },
    async initIndexList() {
        this.meanList = [];
        let idIndex = 0;
        if (this.ResourceList.length > 0) {
            this.ResourceList.forEach(item => {
                let info = this.loopResourceData(item);
                this.meanList.push(info);
            });
        }
    },
    selectMenu(path){
        let name="未知"
        if(this.resourceMap.has(path)){
            name = this.resourceMap.get(path)
        }
        this.addTab(name,path)
    },
    // selectMenu1(path){
    //     console.log(path,"pathpath")
    //     return path
    // },
    addTab(name, path) {
        if(name=='首页'){
            this.show=false
        }else{
            this.show=true
        }
        this.boxname=name
        let _index = this.getIndexByKey(path);
        if (_index >= 0) {
            this.needFresh =true;
            this.chooseTabIndex = _index;
        } else {
            try {
                let url = path+"View";
                let cName = path.replace(/\//g, '_')
                let viewpage = require("@/views/" + url).default;
                viewpage.mixins = [require("@/components/ViewInitMixin").commonMixin];                     
                Vue.component(cName,viewpage);
                this.tabList.push({ name: name, url: cName,key:path });
            } catch (e) {
                this.addTab(name, "notFound");
                console.error(e);
                return;
            }
            this.chooseTabIndex = this.tabList.length - 1;
        }
    },
    navToNext(plus){
        this.needFresh = false;
        if(plus){
            this.chooseTabIndex++;
            if(this.chooseTabIndex>=this.tabList.length){
                this.chooseTabIndex = this.tabList.length-1;
            }
        }else{
            this.chooseTabIndex--;
            if(this.chooseTabIndex<0){
                this.chooseTabIndex = 0;
            }
        }
    },
    getIndexByKey(key) {
        let _index = -1;
        if (this.tabList.length == 0) return _index;
        for (let i = 0; i < this.tabList.length; i++) {
            if (this.tabList[i].key == key) {
                _index = i;
                break;
            }
        }
        return _index;
    },
    chooseTab(item,_index) {
        if(item.name=='首页'){
            this.show=false
        }else{
            this.show=true
        }   
        this.selectMenu1=item.key   
        // this.sys=item. '[\''+sys+'\']'
        const arr = this.selectMenu1.split("/")[0];
        this.sys=arr
        this.boxname = item.name
        this.needFresh = false;
        this.chooseTabIndex = _index;
    },
    removeTab(_index) {
        this.tabList.splice(_index, 1);
        if (this.chooseTabIndex == _index) {
            if(this.chooseTabIndex>(this.tabList.length - 1)){
                this.chooseTabIndex = this.tabList.length - 1;
            }
        } else if (this.chooseTabIndex > _index) {
            this.chooseTabIndex--;
        }else{
            this.updateWinSize();
        }
    },
    updateWinSize(){
        delay(()=>{
            if(this.tabList.length==0) return
            this.isMore =  this.$refs.navUl.clientWidth>this.$refs.navWrap.clientWidth;
            let indexLeft = this.$refs.navUl.children[this.chooseTabIndex].offsetLeft;
            let indexRight = indexLeft+this.$refs.navUl.children[this.chooseTabIndex].offsetWidth;
            let rightPos = this.leftPos+this.$refs.navWrap.clientWidth;
            let status = 0;
            if(indexLeft<this.leftPos){
                status=-1;
            }else if(indexRight>rightPos){
                status=1;
            }
            let left = 0
            if(status<0){
                this.leftPos = indexLeft;
            }else if(status>0){
                this.leftPos = indexRight-this.$refs.navWrap.clientWidth;
            }
            if((this.$refs.navUl.clientWidth-this.leftPos)<this.$refs.navWrap.clientWidth){
                this.leftPos = this.$refs.navUl.clientWidth-this.$refs.navWrap.clientWidth;
                if(this.leftPos<0) this.leftPos=0;
            }
            this.$refs.navUl.style.left = -this.leftPos+'px';
        },100,4);
    },
    openDrop(){
        this.tabIsClose = true;
    },
    closeDrop(){
        this.tabIsClose = false;
    },
    colorDrop(bool){
        this.colorIsDrop = bool;
    },
    //1当前 2其他
    closeTab(type){
        this.closeDrop();
        if(this.tabList.length==0) return;
        if(type==1){
            this.removeTab(this.chooseTabIndex);
        }else if(type==2){
            let tabInfo = this.tabList[this.chooseTabIndex];
            this.chooseTabIndex = 0;
            this.tabList = [];
            this.tabList.push(tabInfo)
        }else{
            this.chooseTabIndex = 0;
            this.tabList = [];
        }
    },
    async onLogin(){
        if(this.account==""||this.password==""){
            utils.showTip("帐号或者密码不能为空")
            return;
        }
        
        let res = await Request.post("login","",{"u":this.account,"p":this.password},false)
        if (res.data.cookie!="" && res.data.cookie!=null) {
            this.Cook= res.data.cookie
            this.$store.commit("loadUserAccount",{token:this.Cook})
        }else{
            this.Cook=""
            throw utils.showTip(res.data.msg) 
        }
        this.account="";
        this.password = "";
    },    
    loginOut(){
        // await Request.post("logout")
        this.$store.commit("loginOut");    
        // window.location.href = RequestUrl+"logout"; 
        window.location.href = RequestUrl + "logout?t="+ new Date().getTime();
    },              
},
mounted() {
    console.log("403a3d9317")
    bus.$on('searchuser',data =>{
        this.addTab("用户管理","customer/user");
        this.selectMenu1="customer/user"
    })
   
    this.colorId = localStorage.getItem('skinColor')||0;
    this.addTab("首页", "welcome");
    window.addEventListener('resize',this.updateWinSize);
},
beforeDestroy(){
    window.removeEventListener('resize',this.updateWinSize);
}
};
</script>
